import React, {useState, useEffect} from 'react';
import styles from './style.less';

const circles = [
  {color: '#577EFF', size: 90, position: [-240, -145]},
  {color: '#F76368', size: 56, position: [183, -101.5]},
  {color: '#FFC561', size: 128, position: [480, -243.5]},
  {color: '#F0F3FF', size: 342, position: [446, 426.5]},
  {color: '#F0F3FF', size: 20, position: [-443, -259.5]},
  {color: '#F0F3FF', size: 100, position: [-212, 202.5]},
  {color: '#F0F3FF', size: 50, position: [-424, -73.5]},
  {color: '#F0F3FF', size: 300, position: [-800, 353]},
]

function getRandom() {
  return Math.floor(Math.random() * window.innerWidth / 2)
}

function LoginPage(props) {
  const {
    logoStyle,
    logoSrc,
    title = '欢迎使用',
    children,
  } = props;

  useEffect(() => {
    /*window.document.body.addEventListener('click', function (event) {
      const centerX = window.innerWidth / 2;
      const centerY = window.innerHeight / 2;
      console.log(event.x - centerX, event.y - centerY);
    })*/
  }, []);

  return (
    <div className="loginBody" style={{backgroundImage: 'url("/static/images/loginBg1.png")'}}>
      <div className="loginWrapper">
        <div className="loginContent">
          <div className="form">
            <div className="logoWrapper">
              <img className="logo" src={logoSrc} style={logoStyle} alt=""/>
              <div className="logoText">{title}</div>
            </div>
            {children}
          </div>
        </div>
      </div>
      <div className="cWrapper">
        {
          circles.map((item, index) =>
            <svg key={index} className="circle" fill="none"
                 style={{
                   width: item.size + 'px',
                   transform: `translate(${item.position[0]}px,${item.position[1]}px)`
                 }}
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 252 252">
              <circle cx="126" cy="126" r="126" fill={item.color}/>
            </svg>)
        }

      </div>
    </div>
  );
}

export default LoginPage;
